<template>
    <view class="messageCard">
        <text class="fromLabel">FROM: {{ messageData.fromLabel }}</text>
        <text class="toLabel">TO: {{ messageData.toLabel }}</text>
        <text class="messageContent">正文：{{ messageData.messageContent }}</text>
        <!--        <view class="messageImageList">-->
        <!--            <img class="messageImage" :src="imgUrl" v-for="imgUrl in messageData.messageImageUrls" :key="imgUrl"-->
        <!--                 alt="image"/>-->
        <!--        </view>-->
        <view class="operaButtonList">
            <view class="operaButton">
                <button class="buttonIcon" src="~static/like.svg" alt="like" @click="likeMessage" type="primary">点赞</button>
                <text class="buttonText">点赞数： {{ messageData.likeCount }}</text>
            </view>
            <view class="operaButton">
                <button class="buttonIcon" src="~static/share.svg" alt="share" open-type='share'
                        @click="shareMessage" type="default">分享</button>
                <text class="buttonText">分享数： {{ messageData.shareCount }}</text>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        name: 'MessageCard',
        // Message Data Primary-Key Id
        props: ['messageId'],
        computed: {
            computedMessageId() {
                return this.messageId;
            }
        },
        data() {
            return {
                // Message Data
                messageData: {
                    toLabel: String,
                    messageContent: String,
                    fromLabel: String,
                    shareCount: Number,
                    likeCount: Number
                }
            };
        },
        async mounted() {
            const db = wx.cloud.database();
            const queryResult = await db.collection('messageboard').where({
                _id: this.computedMessageId
            }).get();
            if (queryResult.data.length > 0) {
                this.messageData = queryResult.data[0];
            }
        },
        methods: {
            async shareMessage() {
                await wx.cloud.callFunction({
                    name: 'shareMessage',
                    data: {
                        targetID: this.computedMessageId
                    }
                });
            },
            async likeMessage() {
                uni.showLoading({
                    title: '点赞中',
                    mask: true
                });
                const likeResult = await wx.cloud.callFunction({
                    name: 'likeMessage',
                    data: {
                        targetID: this.computedMessageId
                    }
                });
                uni.hideLoading();
                if (likeResult.result.status === 'fail') {
                    uni.showToast({
                        title: likeResult.result.message,
                        icon: 'none',
                        position: 'bottom'
                    });
                }
            }

        }
    };
</script>

<style lang="scss" scoped>
@import "~style/global";

.messageCard {
    width: 100%;
    @include flexColumnCenter;
}

.toLabel {
}

.messageContent {
}

.messageImageList {
    @include flexRowCenter;

    .messageImage {
        width: px2rpx(100);
        height: px2rpx(100);
    }
}

.operaButtonList{
    width: 100%;
    @include flexRowCenter;
    justify-content: space-around;

    .operaButton{
        @include flexColumnCenter;

        .buttonIcon{
            width: px2rpx(150);
        }
    }
}
</style>
